<!-- CustomInput.vue -->
<script setup>
import { computed } from "vue"
const props = defineProps(['firstName','lastName'])
const emit = defineEmits(['update:firstName','update:lastName'])

const firstName = computed({
  get() {
    return props.firstName
  },
  set(value) {
    emit('update:firstName', value)
  }
})

const lastName = computed({
  get() {
    return props.lastName
  },
  set(value) {
    emit('update:lastName', value)
  }
})
</script>

<template>
  <div>
    <!-- 原理 -->
    <!-- <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> -->
    <!-- 以title为例 -->
    <!-- <input :value="title" @input="$emit('update:title', $event.target.value)" /> -->
    <!-- 另一种写法 -->
    <input v-model="firstName" />
    <span> - </span>
    <input v-model="lastName" />
  </div>
</template>
